<template>
  <div>
    <login-top middleTop="登录bilibili">
        <div class="login" slot="right" style="font-size:3.311vw" @click="$router.push('/loginPage')">注册</div>
    </login-top>
    <login-text label="账号" placeholder="请输入账号" type="text" style="margin:4.167vw 0" rule="^.{6,16}$" @inputChange="res => model.username = res"></login-text>
    <login-text label="密码" placeholder="请输入密码" type="password" rule="^.{6,16}$" @inputChange="res => model.password = res"></login-text>
    <!-- 或者<LoginTop> </LoginTop> -->
    <login-btn btnText="登录" @loginSubmit="loginSubmit"></login-btn>
  </div>
</template>

<script>
import LoginTop from "../components/common/LoginTop.vue";
import LoginText from "../components/common/LoginText.vue";
import LoginBtn from "../components/common/LoginBtn.vue";
import fn from '../../test'

export default {
  data() {
    return {
      model:{
        username: "",
        password: ""
      }
    };
  },
  components: {
    LoginTop,
    LoginText,
    LoginBtn
  },
  methods:{
    async loginSubmit() {
      fn().then(a => {
        console.log(a);
      });
      let rulg = /^.{6,16}$/
      if(rulg.test(this.model.username) && rulg.test(this.model.password)) {
        // console.log('正则全部校验成功');
        const res = await this.$http.post('/login',this.model)
        this.$msg.fail(res.data.msg);
      }
       else {
         this.$msg.fail('格式不正确，请重新输入')
       }
    }
  } 
};
</script>

<style>
.login {
  line-height: 43px;
  color: lightskyblue;
}

</style>